<template>
  <div style="overflow: scroll">
    <van-pull-refresh
      v-model="isLoading"
      @refresh="onRefresh"
      :disabled="disabled"
    >
      <van-sticky :offset-top="1">
        <!-- header -->
        <header id="header" class="home-header">
          <van-row>
            <van-col span="22" class="aui-padded-l-10 aui-padded-r-5">
              <van-row class="aui-bg-f aui-padded-l-10 header-md">
                <van-col span="2" class="aui-text-center">
                  <i class="iconfont icon-sousuo aui-ftn22 aui-text-9"></i>
                </van-col>
                <van-col
                  span="22"
                  class="aui-ftn14 aui-text-9"
                  @click="fnOpenSearch"
                  >搜索试用商品</van-col
                >
              </van-row>
            </van-col>
            <van-col
              span="2"
              class="header-rt aui-text-right"
              @click="fnOpenUserInfo"
            >
              <i class="iconfont icon-wode aui-ftn20 aui-text-f"></i>
            </van-col>
          </van-row>
          <div class="home-tab" id="navbar" v-if="shang_show">
            <van-tabs
              background="transparent"
              title-inactive-color="#fff"
              title-active-color="#fff"
              :line-height="0"
              :border="false"
              @click="fnOpenCate"
            >
              <van-tab
                v-for="item in tab_items"
                :key="item.id"
                :title="item.name"
              >
              </van-tab>
            </van-tabs>
          </div>
        </header>
      </van-sticky>
      <div id="main_cont">
        <!-- tab slider -->
        <van-swipe
          class="home-my-swipe"
          :autoplay="3000"
          indicator-color="var(--pink)"
        >
          <van-swipe-item
            v-for="(image, index) in images"
            :key="index"
            @touchstart="onTouchStart"
            @touchmove="onTouchMove"
            @touchend="onTouchEnd(index)"
          >
            <img v-lazy="image" :src="image" />
          </van-swipe-item>
        </van-swipe>
        <section class="home_main">
          <!-- grid -->
          <div
            class="
              aui-bg-f aui-margin-t-10 aui-margin-l-15 aui-margin-r-15
              grid
            "
          >
            <van-row class="aui-text-center aui-ftn12 aui-text-3">
              <!-- name, title,cate_index, cate_name, typeId, categoryId,  downtypeId, puttypeId, sortId -->
              <!-- <van-col
                span="6"
                class="item"
                @click="
                  fnOpenDiscount('free_sy', '零折购', -1, '', 1, '', '', '', '')
                "
              >
                <img class="image" src="../../assets/index/mfsy.png" alt="" />
                <div class="aui-grid-label">零折购</div>
              </van-col> -->
              <van-col span="6" class="item" @click="fnOpenYh()">
                <img class="image" src="../../assets/index/mfsy.png" alt="" />
                <div class="aui-grid-label">优惠购</div>
              </van-col>
              <van-col span="6" class="item" @click="fnOpenNine('taoqianggou')">
                <img class="image" src="../../assets/index/tqg.png" alt="" />
                <div class="aui-grid-label">淘抢购</div>
              </van-col>
              <van-col span="6" class="item" @click="fnOpenNine('juhuasuan')">
                <img
                  class="image"
                  src="../../assets/index/icon_jhs.png"
                  alt=""
                />
                <div class="aui-grid-label">聚划算</div>
              </van-col>
              <van-col span="6" class="item" @click="fnOpenNine('douhuo')">
                <img class="image" src="../../assets/index/dh.png" alt="" />
                <div class="aui-grid-label">抖货</div>
              </van-col>
              <!-- <van-col span="6" class="item" @click="fnOpenDiscount('free_sy','奖励购', -1, '',3,  '', '','', '')">
		               <img class="image" src="../../assets/index/jlsy.png" alt="">
		              <div class="aui-grid-label">奖励购</div>
		          </van-col>
              <van-col span="6" class="item" @click="fnOpenDiscount('free_sy','超级购', -1, '', 4,'', '','', '')">
		               <img class="image" src="../../assets/index/cjsy.png" alt="">
		              <div class="aui-grid-label">超级购</div>
		          </van-col>
              <van-col
                span="6"
                class="item"
                @click="
                  fnOpenDiscount(
                    'discount_sy',
                    '折扣',
                    -1,
                    '',
                    2,
                    '',
                    '',
                    '',
                    ''
                  )
                "
              >
                <img class="image" src="../../assets/index/zksy.png" alt="" />
                <div class="aui-grid-label">折扣</div>
              </van-col>
              <van-col span="6" class="item" @click="fnOpenAnswer()">
                <img class="image" src="../../assets/index/wdhd.png" alt="" />
                <div class="aui-grid-label">问答活动</div>
              </van-col> -->
               <van-col span="6" class="item" @click="fnOpenNine('nine')">
                <img class="image" src="../../assets/index/jjby.png" alt="" />
                <div class="aui-grid-label">9.9包邮</div>
              </van-col>
              <van-col span="6" class="item" @click="fnOpenNine('nineteen')">
                <img class="image" src="../../assets/index/19.9by.png" alt="" />
                <div class="aui-grid-label">19.9包邮</div>
              </van-col>
              <van-col span="6" class="item" @click="fnOpenYh()">
                <img class="image" src="../../assets/index/yhj.png" alt="" />
                <div class="aui-grid-label">优惠券</div>
              </van-col>
              <van-col span="6" class="item" @click="fnOpenNine('rexiao')">
                <img class="image" src="../../assets/index/rx.png" alt="" />
                <div class="aui-grid-label">淘宝热销</div>
              </van-col>
              <!-- <van-col span="6" class="item" @click="fnOpenNine('taoqianggou')">
                <img class="image" src="../../assets/index/tqg.png" alt="" />
                <div class="aui-grid-label">淘抢购</div>
              </van-col>
              <van-col span="6" class="item" @click="fnOpenNine('juhuasuan')">
                <img
                  class="image"
                  src="../../assets/index/icon_jhs.png"
                  alt=""
                />
                <div class="aui-grid-label">聚划算</div>
              </van-col> -->
              <!-- <van-col span="6" class="item"  @click="fnOpenDiscount('free_sy','免审核区', 1, '自动通过', 1, '', '',1, '')">
					<img class="image" src="../../assets/index/msh.png" alt="">
					<div class="aui-grid-label">免审核区</div>
				  </van-col> -->
              <!-- <van-col span="6" class="item" @click="fnOpenDiscount('free_sy','精品购', -1, '', 6, '', '','', '')">
				       <img class="image" src="../../assets/index/jpsy.png" alt="">
				      <div class="aui-grid-label">精品购</div>
				  </van-col>
		          <van-col span="6" class="item" @click="fnOpenDiscount('free_sy','福利购', -1, '',3,  '', '','', '')">
		               <img class="image" src="../../assets/index/jlsy.png" alt="">
		              <div class="aui-grid-label">福利购</div>
		          </van-col>
		          <van-col span="6" class="item" @click="fnOpenDiscount('free_sy','超级福利', -1, '', 4,'', '','', '')">
		               <img class="image" src="../../assets/index/cjsy.png" alt="">
		              <div class="aui-grid-label">超级福利</div>
		          </van-col> -->

              <!-- <van-col span="6" class="item" @click="fnOpenDiscount('discount_sy','折扣试用', -1, '', 2,'', '','', '')">
				       <img class="image" src="../../assets/index/zksy.png" alt="">
				      <div class="aui-grid-label">折扣试用</div>
				  </van-col> -->

             
              <!-- <van-col
                span="6"
                class="item"
                @click="
                  fnOpenDiscount('free_sy', '零折购', -1, '', 1, '', '', '', '')
                "
              >
                <img class="image" src="../../assets/index/mfsy.png" alt="" />
                <div class="aui-grid-label">零折购</div>
              </van-col> -->
              
              <!-- <van-col span="6" class="item" @click="fnOpenNine('douhuo')">
                <img class="image" src="../../assets/index/dh.png" alt="" />
                <div class="aui-grid-label">抖货</div>
              </van-col> -->
              <!-- <van-col span="6" class="item" @click="fnChangeWin(5)">
                <img class="image" src="../../assets/index/zxkf.png" alt="" />
                <div class="aui-grid-label">在线客服</div>
              </van-col>
              <van-col span="6" class="item" @click="fnChangeWin(2)">
                <img class="image" src="../../assets/index/sylc.png" alt="" />
                <div class="aui-grid-label">试用流程</div>
              </van-col> -->
            </van-row>
          </div>
          <!-- news -->
          <div
            class="
              home-news
              aui-padded-l-5
              aui-padded-r-10
              aui-margin-t-10
              aui-margin-b-10
              aui-bg-f
              aui-margin-l-15
              aui-margin-r-15
            "
          >
            <van-row class="aui-ftn14 aui-padded-t-10 aui-padded-b-10">
              <van-col
                span="2"
                class="aui-text-f aui-border-r news-lt aui-text-center"
              >
                <img
                  src="../../assets/index/icon_gonggao.png"
                  style="margin: auto"
                  alt=""
                />
              </van-col>
              <van-col
                span="16"
                class="aui-text-3"
                @click="fnOpenArticle(announce_data.id)"
              >
                <div
                  class="van-ellipsis aui-padded-l-10 aui-ftn13"
                  v-text="announce_data.title"
                ></div>
              </van-col>
              <van-col
                span="6"
                class="news-rt aui-text-red aui-text-right aui-ftn13"
                @click="fnOpenAnnounce"
                >更多公告<i
                  class="iconfont icon-qianjin aui-text-red aui-ftn12"
                ></i
              ></van-col>
            </van-row>
          </div>
          <!-- <div class="aui-margin-10 home-sp" @click="fnOpenSp()">
			</div> -->
          <!-- grid-list -->
          <div class="grid-list aui-bg-f aui-padded-15">
            <van-row>
              <van-col
                span="12"
                class="list"
                @click="fnChangeWin(4)"
              >
                <img src="../../assets/index/gn_appxz.png" alt="" />
              </van-col>
              <!-- <van-col span="12" class="list aui-padded-b-15" @click="fnChangeWin(5)">
		                <img src="../../assets/index/gn_zxkf.png" alt="">
		            </van-col> -->
              <!-- 
              <van-col
                span="12"
                class="list"
                v-if="shang_show"
                @click="fnChangeWin(7)"
              >
                <img src="../../assets/index/gn_hhr.png" alt="" />
              </van-col> -->
              <!-- <van-col
                span="12"
                class="list aui-padded-b-15"
                @click="fnChangeWin(1)"
              >
                <img src="../../assets/index/gn_sj.png" alt="" />
              </van-col> -->
              <van-col span="12" class="list" @click="fnChangeWin(6)">
                <img src="../../assets/index/sjwyd.png" alt="" />
              </van-col>
              <!-- <van-col span="12" class="list">
					    <img src="../../assets/index/gn_invite.png" alt="" @click="fnChangeWin(2)">
					  </van-col> -->
            </van-row>
          </div>
          <!-- 排行榜 -->
          <div>
            <Phb></Phb>
          </div>
          <!-- sy -->
          <div class="sy" v-if="shang_show">
            <div class="sy_item aui-padded-l-15 aui-padded-r-15">
              <div
                class="
                  title
                  aui-text-f aui-font-weight aui-ftn-18 aui-text-center
                "
              >
                <img src="../../assets/index/rm_l.png" class="img_one" alt="" />
                热门福利购
                <img src="../../assets/index/rm_r.png" class="img_one" alt="" />
              </div>
              <div class="content aui-bg-f">
                <Sy :type="3" :random="isLoading"></Sy>
              </div>
            </div>
            <div class="sy_item aui-padded-l-15 aui-padded-r-15">
              <div class="title aui-text-f aui-font-weight aui-ftn-18">
                <img src="../../assets/index/xx_l.png" alt="" class="img_two" />
                热门零元购
                <img src="../../assets/index/xx_r.png" alt="" class="img_two" />
              </div>
              <div class="content aui-bg-f aui-row" ref="element">
                <Sy :type="1" :random="isLoading"></Sy>
              </div>
            </div>
          </div>
          <!-- zk -->
          <Zk :random="isLoading"></Zk>
        </section>
      </div>
    </van-pull-refresh>
    <van-button class="kf_btn" round type="danger" @click="utils.openKefu()">
      <img width="38px" height="38px" src="../../assets/index/kf_btn.png" />
    </van-button>
  </div>
</template>
<script>
import "@/styles/home.css";
import home from "../../service/home.js";
import Zk from "./components/zk.vue";
import Sy from "./components/sy.vue";
import Phb from "./components/phb.vue";
import { mapGetters } from "vuex";
export default {
  name: "Home",
  data() {
    return {
      headerH: 0,
      items: [],
      tab_items: [],
      swiper_data: [],
      mySwiper: {},
      announce_data: {},
      images: [],
      clickFlag: false,
      isLoading: false,
      disabled: false,
      shang_show: false, // 是否显示商家端或合伙人
    };
  },
  components: {
    Zk,
    Sy,
    Phb,
  },
  computed: {
    ...mapGetters(["uid"]),
  },
  mounted() {
    this.init();
    this.utils.getQimo(this.uid);
    window.addEventListener("scroll", this.handleScroll, true);
  },
  beforeDestroy() {
    window.removeEventListener("scroll", this.handleScroll, true);
  },
  methods: {
    // 是否显示商家或合伙人
    fnShangShow() {
      home.fnShowShang().then((res) => {
        if (res) this.shang_show = res.status;
      });
    },
    // 引入七陌机器人
    getQimo() {
      if (!this.uid) {
        this.initQimo({
          nickName: "尊敬的试客",
        });
      } else {
        User.fnGetUserData({ uid: this.uid, isToken: true }).then(
          ({ data }) => {
            if (data) {
              this.initQimo({
                userId: this.uid,
                nickName: data.mobile,
              });
            }
          }
        );
      }

      // console.log('输出结果信息', data)
    },
    initQimo(obj) {
      (function (a, h, c, b, f, g) {
        var nosignScript = document.querySelector("#qimo");
        // 存在链接就不再新生成七陌机器人
        if (nosignScript) {
          return;
        }
        // 添加参数、必须添加到qimoClientId对象里面
        a["qimoClientId"] = obj;
        // 生成script节点
        g = h.createElement(c);
        g.async = 1;
        g.charset = "utf-8";
        g.src = b;
        g.setAttribute("id", "qimo");
        c = h.getElementsByTagName(c)[0];
        // 插入生成的script标签链接
        c.parentNode.insertBefore(g, c);
      })(
        window,
        document,
        "script",
        "https://ykf-webchat.7moor.com/javascripts/7moorInit.js?accessId=a60ba080-bc78-11ec-89f0-dd3b96c688de&autoShow=true&language=ZHCN",
        "ud"
      );
    },
    fnOpenSp() {
      this.utils.fnOpenCommon(this, { name: "dou" });
    },
    handleScroll() {
      this.disabled = this.utils.handleScroll();
    },
    // 用于判断滑动还是点击swiper
    onTouchStart(e) {
      this.clickFlag = false;
    },
    // 用于判断滑动还是点击
    onTouchMove(e) {
      this.clickFlag = true;
    },
    onTouchEnd(position) {
      if (this.clickFlag) {
        // 滑动
      } else {
        // 点击
        this.fnStateWeb(this.swiper_data[position].ext);
      }
    },
    init: function () {
      // this.width = this.$refs.element.offsetWidth / 4 + 1;
      this.fnOpenSlide();
      this.fnGetTabData();
      this.fnInitGG();
      this.fnShangShow();
    },
    onRefresh() {
      this.isLoading = false;
      this.init();
    },
    // 分类
    fnGetTabData: function () {
      this.tab_items = this.$store.state.category
        ? this.$store.state.category
        : [];
      if (this.tab_items.length == 0) {
        home.fnGetTab({ isLoading: true }).then((res) => {
          if (res && res.status) {
            this.tab_items = res.data;
            this.$store.commit("ADD_CATEGORY", res.data);
          }
        });
      }
    },
    // 索引和标题
    fnOpenCate: function (index, title) {
      this.fnOpenDiscount(
        "free_sy",
        "免费试用",
        0,
        this.tab_items[index].name,
        1,
        this.tab_items[index].id,
        "",
        "",
        ""
      );
      // this.fnChangeCate('免费试用', 0, this.tab_items[index].name, '',  'category', this.tab_items[index].id)
    },
    // type: 1,
    // category: '',
    // downtype: '',
    // puttype: '',
    // sort: '',
    // 打开试用页面name:路由名字,title: 页面标题,cate_index:分类下标,cate_name:分类名字
    // fnOpenDiscount('free_sy','抖音专区', 2, '抖音','', '', 6, '', '')
    fnOpenDiscount: function (
      name,
      title,
      cate_index,
      cate_name,
      typeId,
      categoryId,
      downtypeId,
      puttypeId,
      sortId
    ) {
      this.utils.fnOpenCommon(this, {
        name: name,
        query: {
          typeId: typeId,
          categoryId: categoryId,
          sortId: sortId,
          title: title,
          cate_name: cate_name,
          index: cate_index,
          downtypeId: downtypeId,
          puttypeId: puttypeId,
          sortId: sortId,
        },
      });
    },
    // 切换列表分类
    fnChangeCate: function (
      title,
      cate_index,
      cate_name,
      sort_id,
      type,
      categoryId
    ) {
      this.utils.fnOpenCommon(this, {
        name: "free_sy",
        query: {
          typeId: "",
          categoryId: categoryId,
          sortId: sort_id,
          title: title,
          cate_name: cate_name,
          index: cate_index,
          cate_type: type,
        },
      });
    },
    // 打开swiper
    fnOpenSlide: function () {
      this.images = [];
      home.fnGetBanner({ isLoading: true }).then((res) => {
        if (res && res.status) {
          this.swiper_data = res.data;
          res.data.forEach((item, index) => {
            this.images.push(item.image);
          });
        }
      });
    },
    // banner 跳转
    fnStateWeb: function (ext) {
      if (ext) {
        this.utils.fnOpenCommon(this, {
          name: "notice_detail",
          params: { id: ext },
          query: { type: 1 },
        });
        // fnADSkip(url, ext)
      }
    },
    // 公告
    fnInitGG: function () {
      home.fnGetNotice({ isLoading: true }).then((res) => {
        if (res && res.status) {
          this.announce_data = res.data[0];
        }
      });
    },

    // 打开问答
    fnChangeFrm: function () {},
    // 打开搜索页面
    fnOpenSearch: function () {
      this.utils.fnOpenCommon(this, { name: "search" });
    },
    // 打开公告列表
    fnOpenAnnounce: function () {
      this.utils.fnOpenCommon(this, { name: "notice" });
    },
    // 打开文章页面
    fnOpenArticle: function (id) {
      this.utils.fnOpenCommon(this, {
        name: "notice_detail",
        params: { id: id },
        query: { type: 1 },
      });
    },
    fnOpenAnswer: function () {
      this.utils.fnOpenCommon(this, { name: "answer_list" });
    },
    // 打开客服页面
    fnOpenKefu: function () {
      this.utils.fnOpenCommon(this, { name: "kefu" });
    },
    // 打开个人中心
    fnOpenUserInfo: function () {
      if (this.$store.state.uid) {
        this.utils.fnOpenCommon(this, {
          name: "user_info",
          query: { title: "个人资料" },
        });
      } else {
        this.utils.fnOpenCommon(this, {
          name: "login",
          query: { from: "home", active: 0 },
        });
      }
    },
    //9.9包邮
    fnOpenNine(type) {
      this.utils.fnOpenCommon(this, {
        name: "nine_nine",
        query: { from: "home", active: 0, type: type },
      });
    },
    //优惠券
    fnOpenYh() {
      this.utils.fnOpenCommon(this, {
        name: "dicount_list",
        query: { from: "home", active: 0 },
      });
    },
    // 切换页面
    fnChangeWin: function (index) {
      switch (index) {
        case 1:
          location.href = "https://hs.jikeshiyong.cn/";
          break;
        case 2:
          this.utils.fnOpenCommon(this, { name: "invite" });
          // this.utils.fnOpenCommon(this, { name: "step" });
          // this.utils.fnOpenCommon(this, { name: "help" })
          break;
        case 3:
          this.utils.fnOpenCommon(this, { name: "invite" });
          //    this.fnOpenSp()
          break;
        case 4:
          this.utils.fnOpenCommon(this, { name: "download" });
          break;
        case 5:
          this.fnOpenKefu();
          break;
        case 6:
          this.utils.fnOpenCommon(this, { name: "wx_code" });
          break;
        case 7:
          location.href = "https://mh.jikeshiyong.cn/";
          break;
      }
    },
  },
};
</script>

<style scoped>
.van-swipe__track,
.van-pull-refresh__track {
  transform: translateX(0px) translateZ(0);
  background-color: #00897b;
}
</style>
